<template>
	<view class='box'>
		<view class="boxCont">
			<!--模板
			<view class="titOne">提交申请</view>
			<view class="nullBlock"></view>
			<view class="nowTit">
				<text class="tit">商家处理</text>
				<text class="time">还剩{{time}}</text>
			</view>
			<view class="nullBlock nullColor">
				<view class="info">商家同意后，请按照给出的退货地址退货，并请记录退货运单号</view>
				<view class="info">如商家拒绝，您可以修改申请后再次发起，商家会重新处理</view>
				<view class="info">如商家超时末处理，退货申请将达成，请按系统给出的退货地址退货</view>
			</view>
			<view class="titOne afterTit">
				<text class="tit">寄回商品</text>
				<view class="right" @click="all">
					全部流程
					<text class="iconfont icon-xiangyou1"></text>
				</view>
			</view> -->
			
			<view v-for="(item,i) in littleList1" :key="i">
				
				<view class="titOne" 
					:class="[item.status==1?'nowTit':'',item.status==-1?'afterTit':'']">
					
					<text class="tit">{{item.title}}</text>
					<text class="time" v-if="item.time && item.status != 0">还剩{{dealTime(item.time)}}</text>
					
					<view class="right" @click="all" v-if="i == littleList1.length-1" style="float: right;">
						全部流程
						<text class="iconfont icon-xiangyou1"></text>
					</view>
				</view>
				
				<view class="nullBlock" :class="[item.status != 0 ? 'nullColor':'']" 
					v-if="i != littleList1.length-1">
					<view class="info" v-for="(val,index) in item.desc" :key="index">{{val}}</view>
				</view>
				
			</view>
			
		</view>
		
		<!-- 弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="popChange" >
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view class="popupContent" >
					<view class="top">
						<text class="iconfont icon-guanbi" @click="closePop"></text>
						<view class="title">全部退款流程</view>
					</view>
					
					<view class="boxCont" style="margin-bottom: 120rpx;">
						<view v-for="(item,i) in textList1" :key="i">
							<view class="titOne" 
								:class="[item.status==1?'nowTit':'',item.status==-1?'afterTit':'']">
								<text class="tit">{{item.title}}</text>
								<text class="time" v-if="item.time && item.status != 0">还剩{{dealTime(item.time)}}</text>
							</view>
							
							<view class="nullBlock" :class="[item.status != 0 ? 'nullColor':'']" 
								v-if="i != textList1.length-1">
								<view class="info" v-for="(val,index) in item.desc" :key="index">{{val}}</view>
							</view>
						</view>
					</view>
					
					<view class="bottomBtn">
						<button class="btn" @click="closePop">我知道了</button>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				time:'',
				
				/* 
				 展示所有
				 status:  0:已经处理过的    1:现在的    -1:未来的
				 time:  倒计时
				 desc: 描述文本
				 */
				/* textList:[
					{
						title:"提交申请",
						status:0,
					},
					{
						title:"商家处理",
						status:1,
						time:"2022-4-30",
						desc:[
							'商家同意后，请按照给出的退货地址退货，并请记录退货运单号',
							'如商家拒绝，您可以修改申请后再次发起，商家会重新处理',
							'如商家超时末处理，退货申请将达成，请按系统给出的退货地址退货'
						]
					},
					{
						title:"寄回商品",
						status:-1,
					},
					{
						title:"商家退款",
						status:-1,
					},
					{
						title:"退款成功",
						status:-1,
					}
				], */
				// 展示一定
				textList:[],
				littleList:[],
			}
		},
		props:["textList1","littleList1"],
		
		onLoad() {
			
			/* this.textList = this.textList1
			let index = this.textList.findIndex(val=>val.status == 1)
			if(index == this.textList.length - 1){
				// 最后一位
				this.littleList = []
				this.littleList[0] = this.textList[index-1]
				this.littleList[1] = this.textList[index]
			}else{
				// 中间位
				this.littleList = []
				this.littleList[0] = this.textList[index-1]
				this.littleList[1] = this.textList[index]
				this.littleList[2] = this.textList[index+1]
			} */
		},
		watch:{
			textList1(newVal){
				console.log(111,newVal);
			},
			littleList1(newVal,oldVal){
				console.log(222,newVal,oldVal);
			},
		},
		methods: {
			// 处理事件戳
			dealTime(time){
				//获取当前时间
				let now = new Date().getTime()
				
				//设置截止时间
				var end = new Date(time).getTime()
				//获取截止时间和当前时间的时间差
				var leftTime = end-now;
				//定义变量 d,h,m,s分别保存天数，小时，分钟，秒
				var d,h,m,s;
				//判断剩余天数，时，分，秒
				if (leftTime>=0) {
					d = Math.floor(leftTime/1000/60/60/24);
					h = Math.floor(leftTime/1000/60/60%24);
					m = Math.floor(leftTime/1000/60%60);
					s = Math.floor(leftTime/1000%60);                   
				}
				
				return `${d}天${h}时${m}分${s}秒`
			},
			all(){
				this.$refs.popup.open("bottom")
			},
			// 弹窗改变
			popChange(e){
				console.log(e);
			},
			//关闭弹窗
			closePop(e){
				this.$refs.popup.close("bottom")
			}
		},
	}
</script>

<style lang='scss' scoped>
	.box {
		
	}

	.boxCont {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.titOne{
			font-size: 28rpx;
			&::before{
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				/* background-color: red; */
				border: 3rpx solid #e86220;
				margin-right: 15rpx;
			}
		}
		.nullBlock{
			min-height: 52rpx;
			border-left: 4rpx solid #e86220;
			margin-left: 7rpx;
			margin-bottom: -19rpx;
			display: inline-block;
			font-size: 25rpx;
			padding-left: 20rpx;
			padding-bottom: 20rpx;
			color: #a1a1a1;
			
			.info{
				margin: 12rpx 0;
			}
		}
		.nullColor{
			border-left-color: #cbcbcb;
		}
		.nowTit{
			margin: 10rpx 0;
			
			.tit{
				font-size: 30rpx;
				font-weight: bold;
				color: #e86220;
			}
			.time{
				font-size: 25rpx;
				margin-left: 10rpx;
			}
			&::before{
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #e86220;
				border: 3rpx solid #e86220;
				margin-right: 15rpx;
			}
		}
		.afterTit{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #a1a1a1;
			
			
			&::before{
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #cbcbcb;
				border: 3rpx solid #cbcbcb;
				margin-right: 15rpx;
				
			}
			.right{
				float: right;
				color: #333;
				.icon-xiangyou1{
					color: #bcbcbc;
				}
			}
		}
	}

	.popupContent{
		padding:  20rpx;
		min-height: 50vh;
		max-height: 80vh;
		box-sizing: border-box;
		
		.top{
			margin: 20rpx 0;
			text-align: center;
			
			
			.icon-guanbi{
				float: right;
				font-size: 25rpx;
				font-weight: bold;
				
				.btn{
					
				}
			}
		}
		
		.bottomBtn{
			background-color: #fff;
			padding: 10rpx 20rpx ;
			width: 95%;
			
			.btn{
				border-radius: 100rpx;
				color: #fff;
				background: linear-gradient(to right, #fd8c02, #ff5402);
			}
		}
	}
	/deep/.vue-ref{
		border-radius: 30rpx 30rpx 0 0 ;
	}
	/deep/.uni-popup__wrapper{
		border-radius: 30rpx 30rpx 0 0 ;
	}
</style>
